<div>
    <div class="span3" style="float: left;">
        <div class="tabBox">
            <ul class="innerTab">
                <?php
                $i = 0;
                $cssclass = '';
                $trainerid = '';
                foreach ($userDetails as $userDetail) {
                    $read = ContactAdmin::model()->findByAttributes(array('is_read' => SkillConfig::STATUS_DEACTIVE, 'from_users_id' => $userDetail->from_users_id,'mail_from'=>SkillConfig::STATUS_DEACTIVE));
                    $trainer = Users::getFrontEndUser($userDetail->from_users_id);
                    $imgsrc = (!empty($trainer->photo)) ? getFrontDir(). $userDetail->from_users_id . '/profile/minithumb/' . $trainer->photo : getFrontDir() . 'myinbox.jpg';
                    $trainerName = (!empty($trainer->first_name) ? $trainer->first_name : $trainer->user->username);
                    if ($i == 0) {
                        $trainerid = $userDetail->from_users_id;
                        $cssclass = 'active';
                    }
                    ?>
                    <li class="<?php echo $cssclass; ?>" ><a href="javascript:void(0);" onclick="return gettrainerconversion(<?php echo $userDetail->from_users_id; ?>,1);">
                            <img src="<?php echo $imgsrc; ?>" title="<?php echo $trainerName; ?>" alt="<?php echo $trainerName; ?>" />
                            <?php echo $trainerName; ?>  <?php echo !empty($read) ? '<span  class="unreadMessage" id="unreadMessage_' . $userDetail->from_users_id . '">'.count($read).' Unread</span>' : ''; ?></a>
                    </li>

                    <?php
                    $i++;
                }
                ?>
            </ul>
            <div class="clear"></div>                   
        </div>
    </div>
    <div class="span8">
        <div class="msgBox">
            <?php if (!empty($trainerid)) { ?>
                <script language="javascript">
                    $(document).ready(function() {
                        gettrainerconversion(<?php echo $trainerid; ?>,0);
                    });
                </script>

            </div>
            <div class="clear"></div> 
            <div class="padding20px">
                <div class="reply-box">
                    <textarea  id="message_text_id" name="message_text" style="width: 97.5%;height: 90px;"></textarea>
                    <div  class="errorMessage" id="errorMessage_msg_id"></div>
                    <input type="button" value="Reply" name="yt1" class="btnbook" onclick="return replytotrainer()"></p>
                </div></div>
            <?php
        } else {
            echo 'No conversion.';
        }
        ?>

    </div></div>

<style>
    .span9{width: 100%!important;}
    .unreadMessage{color: red; padding: 7px;float: right;background-color: yellow;}
</style>
<script>
    function gettrainerconversion(fromuid,type) {      
        jQuery.ajax({
            'type': 'POST',
            'url': "<?php echo Yii::app()->createAbsoluteUrl("MailConversation/gettrainerconversion"); ?>",
            data: 'from_user=' + fromuid+'&type='+type,
            'success': function(data) {
                $('.msgBox').html(data);
                $("#unreadMessage_" + fromuid).hide();

            },
            'cache': false});

    }
    function replytotrainer() {
        var from_user = $("#front_end_users_id").val();
        var msgval = $("#message_text_id").val();
        if (msgval == '') {
            $("#errorMessage_msg_id").text('Message  can not blank.')
            return false;
        }
        if (msgval != '') {
            jQuery.ajax({
                'type': 'POST',
                'url': "<?php echo Yii::app()->createAbsoluteUrl("MailConversation/sendMailTouser"); ?>",
                'data': "from_user=" + from_user + "&msgval=" + msgval,
                'beforeSend': function(jqXHR, settings) {
                    $("#AjaxLoader_id").show();
                },
                'success': function(data) {
                    if ($.trim(data) == 'success') {
                        gettrainerconversion(from_user);
                        $("#message_text_id").val('');
                        $("#AjaxLoader_id").hide();
                    }
                },
                'cache': false
            });
        }

    }




</script>